<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent, provide } from 'vue';
import {
  ElMessage,
  ElLoading,
  ElMessageBox,
  ElNotification,
} from 'element-plus';

export default defineComponent({
  name: 'App',
  setup() {
    /**
     * provide、inject 新功能
     * ↑↑↑ 代替 ↓↓↓
     * const { ctx, proxy } = getCurrentInstance(); // app.config.globalProperties
     */
    provide('$message', ElMessage);
    provide('$loading', ElLoading);// instal还有注册指令
    provide('$msgbox', ElMessageBox);
    provide('$messageBox', ElMessageBox);
    provide('$alert', ElMessageBox.alert);
    provide('$confirm', ElMessageBox.confirm);
    provide('$prompt', ElMessageBox.prompt);
    provide('$notify', ElNotification);
  },
});
</script>

<style lang="less">
body {
  // 给body设置paddingTop为header的高度,不需要再在main设置marginTop或paddingTop
  padding-top: 60px;
  min-height: calc(100% - 60px);
}
#app {
  height: 100%;
  // id优先级高于标签
  font-family:
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
// a {
//   font-weight: bold;
//   color: #2c3e50;

//   &.router-link-exact-active {
//     color: #42b983;
//   }
// }
</style>
